<template>
  <el-date-picker
    v-model="date"
    :type="props.type"
    value-format="YYYY-MM-DD"
    unlink-panels
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :shortcuts="props.showShortcuts ? shortcuts : []"
    v-bind="$attrs"
  />
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue'

  const props = defineProps({
    type: {
      type: String,
      default: 'daterange'
    },
    showShortcuts: {
      type: Boolean,
      default: true
    }
  })

  const date = ref<string[] | string>(props.type.includes('range') ? [] : '')

  const model = defineModel<string>({ default: '' })
  const startTimeModel = defineModel<string>('startTime', { default: '' })
  const endTimemodel = defineModel<string>('endTime', { default: '' })

  /**----------------------------watch----------------------------------------------------------------------- */

  watch(
    [startTimeModel, endTimemodel, model],
    () => {
      if (typeof date.value === 'object') {
        if (!date.value) date.value = []
        date.value[0] = startTimeModel.value
        date.value[1] = endTimemodel.value
      }

      if (typeof date.value === 'string') date.value = model.value
    },
    {
      immediate: true
    }
  )

  watch(date, () => {
    if (typeof date.value === 'object') {
      startTimeModel.value = date.value?.[0] ?? ''
      endTimemodel.value = date.value?.[1] ?? ''
    }

    if (typeof date.value === 'string') {
      model.value = date.value ?? ''
    }
  })

  /**----------------------------shortcuts----------------------------------------------------------------------- */

  const shortcuts = [
    {
      text: '当天',
      value: [new Date(), new Date()]
    },
    {
      text: '当月',
      value: () => {
        const today = new Date()
        const currentMonth = today.getMonth()
        const currentYear = today.getFullYear()
        const firstDayOfMonth = new Date(currentYear, currentMonth, 1)
        const lastDayOfMonth = new Date(currentYear, currentMonth + 1, 0)
        return [firstDayOfMonth, lastDayOfMonth]
      }
    },
    {
      text: '上个月',
      value: () => {
        const today = new Date()
        const currentMonth = today.getMonth() - 1
        const currentYear = today.getFullYear()
        const firstDayOfMonth = new Date(currentYear, currentMonth, 1)
        const lastDayOfMonth = new Date(currentYear, currentMonth + 1, 0)
        return [firstDayOfMonth, lastDayOfMonth]
      }
    },
    {
      text: '当年',
      value: () => {
        const today = new Date()
        const currentYear = today.getFullYear()
        const firstDayOfMonth = new Date(currentYear, 0, 1)
        const lastDayOfMonth = new Date(currentYear, 12, 0)
        return [firstDayOfMonth, lastDayOfMonth]
      }
    },
    {
      text: '上一年',
      value: () => {
        const today = new Date()
        const currentYear = today.getFullYear() - 1
        const firstDayOfMonth = new Date(currentYear, 0, 1)
        const lastDayOfMonth = new Date(currentYear, 12, 0)
        return [firstDayOfMonth, lastDayOfMonth]
      }
    }
  ]
</script>

<style scoped></style>
